import { DemoBlock } from '@/library/widgets/DemoBlock'
import { Space } from '@/library/gallery/components/Space'
import { Button } from '@/library/gallery/components/Button'

export default (): React.ReactElement => (
  <>
    <DemoBlock title="换行">
      <Space wrap>
        <Button pattern="success">按钮1</Button>
        <Button pattern="success">按钮2</Button>
        <Button pattern="success">按钮3</Button>
        <Button pattern="success">按钮4</Button>
        <Button pattern="success">按钮5</Button>
        <Button pattern="success">按钮6</Button>
        <Button pattern="success">按钮7</Button>
        <Button pattern="success">按钮8</Button>
        <Button pattern="success">按钮9</Button>
        <Button pattern="success">按钮10</Button>
        <Button pattern="success">按钮11</Button>
      </Space>
    </DemoBlock>

    <DemoBlock title="垂直方向的间距">
      <Space direction="vertical">
        <Button pattern="warning">按钮1</Button>
        <Button pattern="warning">按钮2</Button>
        <Button pattern="warning">按钮3</Button>
      </Space>
    </DemoBlock>

    <DemoBlock title="自定义间距大小">
      <Space style={{ '--gap': '24px' }}>
        <Button pattern="danger">按钮1</Button>
        <Button pattern="danger">按钮2</Button>
        <Button pattern="danger">按钮3</Button>
      </Space>
    </DemoBlock>

    <DemoBlock title="渲染为块级元素">
      <Space direction="vertical" block>
        <Button>按钮1</Button>
        <Button>按钮2</Button>
        <Button>按钮3</Button>
      </Space>
    </DemoBlock>

    <DemoBlock title="主轴对齐方式">
      <Space justify="center" block>
        <Button pattern="primary" shape="rectangular">按钮1</Button>
        <Button pattern="primary" shape="rectangular">
          按钮2
          <br />
          按钮2
        </Button>
        <Button pattern="primary" shape="rectangular">
          按钮3
          <br />
          按钮3
          <br />
          按钮3
        </Button>
      </Space>
    </DemoBlock>

    <DemoBlock title="交叉轴对齐方式">
      <Space align="end">
        <Button fill="outline">按钮1</Button>
        <Button fill="outline">
          按钮2
          <br />
          按钮2
        </Button>
        <Button fill="outline">
          按钮3
          <br />
          按钮3
          <br />
          按钮3
        </Button>
      </Space>
    </DemoBlock>
  </>
)
